<template>
	<view class="content">
		<view class="header-block" v-if="cityLst.length > 0">
			<!-- <view class="left-icon"></view> -->
			<image src="../../static/index/icon.png" class="left-icon"></image>
			<view class="border-option">|</view>
			<picker mode="selector" :value="cityId" @change="cityLstChange" :range="cityLst" range-key="addressName">
				<view class="left-txt-option">
					<view class="city-name">{{ cityLst[cityId].addressName }}</view>
					<image class="city-icon" src="../../static/index/xiala.png"></image>
				</view>
			</picker>
			<view class="search-option">
				<image src="../../static/index/searchIcon.png" class="search-icon"></image>
				<input class="input-class" placeholder-class="pl" placeholder="搜你想要的课程" />
			</view>
			<image src="../../static/index/user.png" class="right-icon" @click="loginClick"></image>
		</view>
		<swiper class="swiper-block" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-if="bannerItem.type==2" v-for="(bannerItem, index) in bannerLstOne" :key="index">
				<image :src="bannerItem.image" @click="openUrl(bannerItem)" class="swiper-item"></image>
			</swiper-item>
		</swiper>
		<view class="classify-lst-block">
			<view class="item-option" @click="urlClick(item)" v-for="(item, index) in selectIndexLst" :key="index">
				<image :src="item.img" class="icon"></image>
				<view class="txt">{{ item.name }}</view>
			</view>
		</view>
		<view class="add-info-option">
			<view class="hint-option">
				<view class="left-option">免费领取</view>
				<view class="right-option">卡尔顿超级大礼包</view>
			</view>

			<!-- 	<swiper class="hint-img" circular :indicator-dots="false" :autoplay="false" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(bannerTwoItem, index) in bannerLstTwo.slice(0, 1)" :key="index">
					<image :src="bannerTwoItem.image" style="width: 100%; height: 100%"></image>
				</swiper-item>
			</swiper> -->
			<view class="tui-jian-block">
				<image src="../../static/index/tuijianIcon.png" class="tui-jian-icon"></image>
			</view>
			<view class="appointment-block">
				<view class="item-option">
					<image src="../../static/index/submit1.png" class="hint-icon"></image>
					<view class="input-opiton">
						<input class="input-class" placeholder-class="pl" v-model="param.name" placeholder="姓名" />
					</view>
				</view>
				<view class="item-option">
					<image src="../../static/index/submit2.png" class="hint-icon"></image>
					<view style="flex:auto">
						<picker mode="selector" :value="campusIndex" @change="campusChange" :range="campusArr"
							range-key="name">
							<view class="input-opiton">
								<input class="input-class" placeholder-class="pl" v-model="campusName"
									placeholder="校区" />
								<image src="../../static/index/xiabiao.jpg" class="right-icon"></image>
							</view>
						</picker>
					</view>
				</view>

				<view class="item-option">
					<image src="../../static/index/submit3.png" class="hint-icon"></image>
					<view style="flex:auto">
						<picker mode="selector" :value="classifyIndex" @change="classifyChange" :range="courseLst"
							range-key="name">
							<view class="input-opiton">
								<input class="input-class" v-model="param.course" :disabled="true"
									placeholder-class="pl" placeholder="课程" />
								<image src="../../static/index/xiabiao.jpg" class="right-icon"></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="item-option">
					<image src="../../static/index/submit4.png" class="hint-icon"></image>
					<view class="input-opiton">
						<input class="input-class" placeholder-class="pl" v-model="param.phone" placeholder="手机号" />
					</view>
				</view>

				<view class="btn-submit" @click="formSubmitClick">提交预约</view>
			</view>
		</view>
		<view class="blcok" v-if="courseLst.length > 0">
			<view class="hint-option">
				<view class="txt">
					热门课程
					<view class="border-option"></view>
				</view>
				<view class="right-txt" @click="navGo('/pages/classify/classify')">更多 ></view>
			</view>

			<view class="lst-block">
				<block v-for="(item, index) in courseLst" :key="index" v-if="index <= 3">
					<view class="item-option" @click="coureDetailClick(item)">
						<image :src="item.image" class="img"></image>
						<view class="txt">{{ item.name }}</view>
					</view>
				</block>
			</view>
		</view>

		<view class="blcok" v-if="teacherLst.length > 0">
			<view class="hint-option">
				<view class="txt">
					师资团队
					<view class="border-option"></view>
				</view>
				<view class="right-txt" @click="navGo('/pages/teachers/teachers')">更多 ></view>
			</view>
			<view class="lst-block">
				<block v-for="(teacherItem, index) in teacherLst" :key="index">
					<view class="teacher-option" @click="teacherClick(teacherItem)" v-if="index <= 3">
						<image :src="teacherItem.htmlimg" class="icon"></image>
						<view class="name">{{ teacherItem.name }}</view>
					</view>
				</block>
			</view>
		</view>

		<view class="blcok">
			<view class="hint-option">
				<view class="txt">
					国际学校课程体系
					<view class="border-option"></view>
				</view>
			</view>

			<view class="lst-block">
				<!-- <view class="item-two-option" @click="openPopup()">
					<image src="../../static/course/classify1.png" class="img-icon"></image>
				</view>

				<view class="item-two-option" @click="openPopup()">
					<image src="../../static/course/classify2.png" class="img-icon"></image>
				</view>

				<view class="item-two-option" @click="openPopup()">
					<image src="../../static/course/classify3.png" class="img-icon"></image>
				</view>

				<view class="item-two-option" @click="openPopup()">
					<image src="../../static/course/classify4.png" class="img-icon"></image>
				</view> -->
				<view class="item-two-option" v-for="(item, index) in services" :key="item.id"
					@click="openNavigateTo(item.url)">
					<image :src="item.img" class="img-icon"></image>
				</view>
			</view>
		</view>

		<view class="blcok">
			<view class="hint-option">
				<view class="txt">
					咨询学习
					<view class="border-option"></view>
				</view>
				<view class="right-txt" @click="navGo('/pages/consult/consult')">更多 ></view>
			</view>

			<view class="lst-block">
				<!-- <view class="item-zixun-option">
					<view class="img-icon"></view>
				</view>
				<view class="item-zixun-option">
					<view class="img-icon"></view>
				</view>

				<view class="item-zixun-option">
					<view class="img-icon"></view>
				</view>

				<view class="item-zixun-option">
					<view class="img-icon"></view>
				</view> -->
				<view class="item-zixun-option" v-for="(item, index) in jumplst" :key="item.id"
					@click="openNavigateTo(item.url)">
					<image class="img-icon" :src="item.img" mode=""></image>
				</view>
			</view>
		</view>

		<view class="tab-block" v-if="distinctInfoLst.length > 0">
			<scroll-view :scroll-x="true" class="left-tab-option">
				<view class="tab-item" @click="tabItemClick(item, index)" v-for="(item, index) in distinctInfoLst"
					:key="index">
					<view class="item-option">
						<view class="item-txt" :class="index == tabIndexCurrent ? 'check-item' : 'no-check-item'">
							{{ item.name }}
						</view>
						<view class="item-border-bottom" v-if="index == tabIndexCurrent"></view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="tab-lst-block" v-if="tabLst.length > 0">
			<view class="item-option" v-for="(item, index) in tabLst.slice(0, 10)" :key="index"
				@click="detailClick(item)">
				<image src="../../static/public/moreIcon.png" class="icon-item-option"></image>
				<view class="txt">{{ item.title }}</view>
			</view>
		</view>
		<!-- <view class="bottom-img"></view> -->
		<image src="../../static/index/indexBottom.png" class="bottom-img"></image>
		<view class="bottom-txt-block">
			<view class="txt">咨询电话：4006838910</view>
			<view class="txt">卡尔顿国际教育</view>
			<view class="txt">福田校区:福华一路国际商会大厦B座1101</view>
			<view class="txt">南山校区:南海大道阳光华艺大厦A座</view>
			<view class="txt">全部服务适用于18岁以上人群</view>
		</view>
		<sumitPopup ref="submitPopupRef" :classifyArr="courseLst" @submitPopupChange="submitPopupChange"></sumitPopup>
	</view>
</template>

<script>
	 
	export default {
		data() {
			return {
				cityArr: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				campusArr: [],
				campusIndex: 0,
				campusName: '',
				classifyIndex: 0,
				classifyName: '',
				tabIndexCurrent: 0,
				lst: [{
						name: '推荐'
					},
					{
						name: '雅思'
					},
					{
						name: '托福'
					},
					{
						name: 'SAT'
					},
					{
						name: '教学专栏'
					}
				],
				bannerLstOne: [],
				bannerLstTwo: [],
				teacherLst: [],
				selectIndexLst: [],
				indexLst: [],
				tabLst: [],
				courseLst: [],
				cityLst: [],
				cityId: '',
				param: {
					name: '',
					phone: '',
					course: '',
					adminId: ''
				},
				services: [],
				jumplst: [],
				adminAllLst: [],
				selectIndexTwoLst: [],
				distinctInfoLst: [],
				selectInfoTypeLst: [],
			};
		},
		onLoad() {
			// this.bannerList();
			// this.teacherList();
			// this.selectIndexList();
			// this.selectCourseList();
			uni.setStorageSync('adminId', 0);
			this.selectAdminAllLst();
			// this.getSelectJumpByType3();
			// this.getSelectJumpByType5();
		},
		onShow() {
			// let adminId = uni.getStorageSync('adminId') || 0;
			// if (adminId) {
			// 	this.cityLst.forEach((item, index) => {
			// 		if (item.id == adminId) {
			// 			this.cityId = index;

			// 		}
			// 	});
			// }
		},
		methods: {
			detailClick(item) {
				uni.setStorageSync('consultDetail', item)
				uni.navigateTo({
					url: '/pages/consult/detail'
				})
			},
			urlClick(item) {
				console.log('item', item)
				window.open(item.url)
			},
			cityLstChange(e) {

				this.cityId = e.detail.value;
				let id = this.cityLst[this.cityId].id;
				uni.setStorageSync('adminId', id);
				this.bannerList();
				this.teacherList();
				this.selectIndexList();
				this.selectCourseList();

			},
			submitPopupChange(data) {
				uni.showLoading({
					title: '提交中'
				});

				this.$http('common.addSubmit', {
					...data,
					adminId: uni.getStorageSync('adminId')
				}).then((res) => {
					if (res.code == 200) {
						this.$tools.showMsg('提交成功');
						uni.hideLoading();
						this.$refs.submitPopupRef.clearParam();
						this.$refs.submitPopupRef.closePopup();
						console.log('res======>', res);
					}
				});
			},
			selectAdminAllLst() {
				this.$http('common.selectAdminAll').then((res) => {
					if (res.code == 200) {
						console.log('res=====', res);
						this.cityLst = res.data.data;
						console.log('this.cityLst=======', this.cityLst)
						let adminId = uni.getStorageSync('adminId') || 0;
						console.log('adminId========', adminId)
						if (adminId == 0) {
							uni.setStorageSync('adminId', this.cityLst[0].id);
							let id = this.cityLst[0].id
							this.cityLst.forEach((item, index) => {
								if (item.id == id) {
									this.cityId = index;
									this.bannerList();
									this.teacherList();
									this.selectIndexList();
									this.selectCourseList();
									this.getSelectJumpByType3();
									this.getSelectJumpByType5();
									this.getSelectAdminAllLst()
									this.selectIndexDistinctInfo()
								}
							});
						} else {
							this.cityLst.forEach((item, index) => {
								if (item.id == adminId) {
									this.cityId = index;
									this.bannerList();
									this.teacherList();
									this.selectIndexList();
									this.selectCourseList();
									this.getSelectJumpByType3();
									this.getSelectJumpByType5();
									this.getSelectAdminAllLst()
									this.selectIndexDistinctInfo()
								}
							});
						}
					}
				});
			},
			getSelectAdminAllLst() {
				this.campusArr = []
				this.$http('common.selectOutletsAll', {
					adminId: uni.getStorageSync('adminId')
				}).then((res) => {
					if (res.code == 200) {
						this.campusArr = res.data.data;
						console.log('this.campusArr', this.campusArr)
					}
				});
			},
			selectCourseList() {
				this.courseLst = []
				this.$http('common.selectCourseDetail', {
					adminId: uni.getStorageSync('adminId')
				}).then((res) => {
					if (res.code == 200) {
						this.courseLst = res.data.data;
						uni.setStorageSync('courseLst', this.courseLst);
					}
				});
			},
			coureDetailClick(item) {
				uni.setStorageSync('coureItem', item);
				this.navGo('/pages/classify/detail');
			},
			formSubmitClick() {
				uni.showLoading({
					title: '提交中'
				});

				this.$http('common.addSubmit', {
					...this.param,
					adminId: uni.getStorageSync('adminId')
				}).then((res) => {
					if (res.code == 200) {
						this.$tools.showMsg('提交成功');
						this.param.name = '';
						this.param.course = '';
						this.param.phone = '';
						this.campusName = '';
						this.param.adminId = ''
						uni.hideLoading();

						console.log('res======>', res);
					}
				});
				console.log('表单提交信息==>', this.param);
			},
			openPopup() {
				this.$refs.submitPopupRef.openPopup();
			},
			openUrl(item) {
				console.log('item======', item)
				// return
				window.open(item.url)
			},
			selectIndexList() {
				this.selectIndexLst = []
				this.$http('common.selectIndex', {
					adminId: uni.getStorageSync('adminId')
				}).then((res) => {
					if (res.code == 200) {
						let lst = res.data.data
						if (lst.length > 0) {
							res.data.data.forEach((item) => {
								if (item.typeId == 1 && item.type == 2) {
									this.selectIndexLst.push(item);
								}
								if (item.typeId == 1) {
									this.selectIndexTwoLst.push(item)
									// this.tabItemClick(this.selectIndexTwoLst[0].id, 0);
								}
							});
						} else {
							this.selectIndexLst = []
						}
					}
				});
			},
			selectIndexDistinctInfo() {
				let arr = []
				this.$http('common.selectIndexDistinctInfo', {
					adminId: uni.getStorageSync('adminId')
				}).then(res => {
					console.log('res===selectIndexDistinctInfo=====', res)
					if (res.code == 200) {
						arr = res.data.data
					}
				})

				this.$http('common.selectInfoType', {
					adminId: uni.getStorageSync('adminId')
				}).then(res => {
					if (res.code == 200) {
						let arrTwo = res.data.data
						if (arr.length > 0) {
							arrTwo.forEach(item => {
								arr.push({
									...item,
									type: 2
								})
							})
						}
						this.distinctInfoLst=arr
						this.tabItemClick(this.distinctInfoLst[0],0)
						console.log('arrTwo=======', arr)
					}
				})

			},
			bannerList() {
				this.bannerLstOne = []
				this.bannerLstTwo = []
				this.$http('common.selectCarouselAll', {
					adminId: uni.getStorageSync('adminId')
				}).then((res) => {
					if (res.code == 200) {

						res.data.data.forEach((item) => {
							if (item.indexId == 0) {
								this.bannerLstOne.push(item);
							}
							if (item.indexId == 1) {
								this.bannerLstTwo.push(item);
							}
						});
					}
				});
			},
			teacherList() {
				this.teacherLst = []
				this.$http('common.selectTeacher', {
					adminId: uni.getStorageSync('adminId')
				}).then((res) => {
					if (res.code == 200) {
						this.teacherLst = res.data.data;
						console.log('this.teacherLst', this.teacherLst)
					}
				});
			},
			tabItemClick(item, index) {
				uni.showLoading({
					title: '请求中'
				});
				this.tabLst = [];
				this.tabIndexCurrent = index;
				 
				if(item.type==1){
					//栏目页查询资讯
					this.$http('common.selectInformationByIndexId', {
						indexId:item.id
					}).then((res) => {
						if (res.code == 200) {
							uni.hideLoading();
							this.tabLst=res.data.data
							 
						}
					});
				}else{
					//其他资讯类型
					this.$http('common.selectInfoByType', {
						type:item.id
					}).then((res) => {
						if (res.code == 200) {
							uni.hideLoading();
							this.tabLst=res.data.data
							 
						}
					});
				}
				 
			},
			navGo(url) {
				uni.navigateTo({
					url
				});
			},
			teacherClick(item) {
				uni.setStorageSync('teacherItem', item);
				uni.navigateTo({
					url: '/pages/teachers/detail'
				});
			},
			campusChange(e) {
				console.log('e======', e);
				this.campusIndex = e.detail.value;
				this.campusName = this.campusArr[this.campusIndex].name;
				this.param.adminId = this.campusArr[this.campusIndex].id;

			},
			classifyChange(e) {
				this.classifyIndex = e.detail.value;
				this.param.course = this.courseLst[this.classifyIndex].name;
			},
			loginClick() {
				let loginToken = uni.getStorageSync('loginToken');
				if (loginToken) {} else {
					this.$tools.showMsg('请登录');
					setTimeout((res) => {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 600);
				}
			},
			getSelectJumpByType3() {
				this.$http('common.selectJumpByType', {
					adminId: uni.getStorageSync('adminId'),
					type: 3
				}).then((res) => {
					if (res.code == 200) {
						this.services = res.data.data;
					}
				});
			},
			getSelectJumpByType5() {
				this.$http('common.selectJumpByType', {
					adminId: uni.getStorageSync('adminId'),
					type: 5
				}).then((res) => {
					if (res.code == 200) {
						this.jumplst = res.data.data;
					}
				});
			},
			openNavigateTo(url) {
				window.open(url);
				// console.log(url);
			}
		}
	};
</script>

<style lang="scss">
	.header-block {
		display: flex;
		align-items: center;
		padding-left: 34rpx;
		padding-right: 34rpx;
		background: #1f9f99;
		height: 77rpx;
		
		.left-icon {
			width: 160rpx; 
			height: 43rpx;
		}

		.border-option {
			margin-left: 15rpx;
			color: #fff;
		}

		.left-txt-option {
			margin-left: 12rpx;
			display: flex;
			align-items: center;
			
			.city-name {
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				
			}

			.city-icon {
				margin-left: 8rpx;
				width: 23rpx;
				height: 11rpx;
			}
		}

		.search-option {
			margin-left: 20rpx;
			// width: 300rpx;
			flex: auto;
			height: 43rpx;
			background: #ffffff;
			border-radius: 22rpx;
			display: flex;
			align-items: center;

			.search-icon {
				margin-left: 36rpx;
				width: 20rpx;
				height: 20rpx;
			}

			.input-class {
				transform: scale(0.7);
				font-size: 20rpx;
				margin-left: 15rpx;
			}

			.pl {
				font-size: 20rpx;
			}
		}

		.right-icon {
			// margin-left: 48rpx;
			width: 44rpx;
			height: 44rpx;
			// background: skyblue;
		}
	}

	.swiper-block {
		height: 338rpx;
		width: 100%;

		.swiper-item {
			width: 100%;
			height: 100%;
			// background: skyblue;
		}
	}

	.classify-lst-block {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		// justify-content: space-around;
		padding: 24rpx 0;
		box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(0, 0, 0, 0.17);

		.item-option {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 20%;
			margin-bottom: 24rpx;

			.icon {
				width: 75rpx;
				height: 75rpx;
				background: skyblue;
				border-radius: 50%;
			}

			.txt {
				margin-top: 12rpx;
				font-size: 28rpx;
			}
		}
	}

	.blcok {
		margin-left: 30rpx;
		margin-right: 30rpx;

		.hint-option {
			margin-top: 34rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #eeeeee;

			.txt {
				font-weight: 500;
				font-size: 33rpx;
				color: #434343;
				position: relative;
			}

			.txt::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: -24rpx;
				height: 4rpx;
				background: #000;
			}

			.right-txt {
				font-size: 24rpx;
			}
		}

		.lst-block {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			padding-bottom: 34rpx;
			justify-content: center;

			.item-option {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 34rpx;
				width: 50%;

				.img {
					width: 336rpx;
					height: 188rpx;
					background: #1f9f99;
					border-radius: 11rpx 11rpx 0rpx 0rpx;
				}

				.txt {
					margin-top: 12rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #707070;
				}
			}

			.teacher-option {
				margin-top: 24rpx;
				width: 25%;
				background: #fff;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.icon {
					width: 133rpx;
					height: 133rpx;
					background: #bfbfbf;
					border-radius: 50%;
				}

				.name {
					margin-top: 12rpx;
					font-size: 26rpx;
				}
			}

			.item-two-option {
				width: 50%;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.img-icon {
					margin-top: 24rpx;
					// background: skyblue;
					height: 220rpx;
					margin-right: 24rpx;
					width: 450rpx;
				}
			}

			.item-zixun-option {
				width: 32%;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.img-icon {
					margin-top: 24rpx;
					// background: skyblue;
					height: 144rpx;
					margin-right: 24rpx;
					width: 250rpx;
				}
			}
		}
	}

	.appointment-block {
		// height: 680rpx;
		background: #ffffff;
		// border-radius: 24rpx;
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.item-option {
			width: 700rpx;
			margin-top: 32rpx;
			height: 88rpx;
			border: 1rpx solid #aaaaaa;
			display: flex;
			align-items: center;
			border-radius: 256rpx;

			.hint-txt {
				margin-left: 16rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #B3B3B3;
				flex: none;
			}

			.hint-icon {
				flex: none;
				width: 44rpx;
				height: 44rpx;
				// border: 1rpx solid red;
				margin-left: 24rpx;
			}

			.input-opiton {
				margin-left: 16rpx;
				// background: #f4f6f8;
				// border-radius: 12rpx;
				flex: auto;
				// margin-top: 16rpx;
				// padding-left: 32rpx;
				// padding-right: 32rpx;
				display: flex;
				align-items: center;
				margin-right: 24rpx;

				.input-class {
					// flex: auto;
					width: 100%;
					// text-align: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #2f2525;
				}

				.pl {
					font-size: 28rpx;
					color: #bdbdbd;
				}

				.right-icon {
					flex: none;
					width: 24rpx;
					height: 12rpx;
				}
			}
		}

		.btn-submit {
			margin-top: 48rpx;
			width: 312rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			background: #209e9a;
			border-radius: 56rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #ffffff;
		}
	}

	.add-info-option {
		margin-top: 24rpx;

		.hint-option {
			display: flex;
			align-items: center;
			justify-content: center;

			.left-option {
				width: 272rpx;
				height: 79rpx;
				line-height: 79rpx;
				text-align: center;
				background: #1f9f99;
				border-radius: 39rpx 0rpx 0rpx 39rpx;
				font-weight: 400;
				font-size: 40rpx;
				color: #ffffff;
			}

			.right-option {
				width: 420rpx;
				height: 79rpx;
				line-height: 79rpx;
				text-align: center;
				background: #e31836;
				border-radius: 0rpx 39rpx 39rpx 0rpx;
				font-weight: 400;
				font-size: 40rpx;
				color: #ffffff;
			}
		}

		.hint-img {
			margin-top: 34rpx;
			margin-left: 34rpx;
			margin-right: 34rpx;
			// background: skyblue;
			height: 168rpx;
		}
	}

	.tui-jian-block {
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-jian-icon {
		height: 166rpx;
	}

	.bottom-img {
		height: 79rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 720rpx;
		margin: 0 auto;
	}

	.bottom-txt-block {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		padding-bottom: 42rpx;

		.txt {
			color: #aaaaaa;
			margin-top: 24rpx;
			font-size: 22rpx;
		}
	}

	.tab-block {
		background: #fff;
		height: 88rpx;
		display: flex;
		align-items: center;
		padding-top: 16rpx;
		padding-left: 34rpx;
		padding-right: 34rpx;
		padding-bottom: 14rpx;

		.left-tab-option {
			white-space: nowrap;
			// width: 534rpx;
			width: 100%;
			// flex: auto;
			// display: flex;
			// align-items: center;
			height: 88rpx;
			// margin-right: 12rpx;

			.tab-item {
				height: 88rpx;

				font-size: 28rpx;
				position: relative;
				display: inline-flex;

				.item-option {
					display: flex;
					align-items: center;
					padding-right: 82rpx;


				}

				.item-txt {
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
				}

				.item-border-bottom {
					position: absolute;
					bottom: 0;
					width: 34rpx;
					height: 6rpx;
					border-radius: 6rpx;
					background: #209e9a;
				}
			}

			.no-check-item {
				font-size: 32rpx;
				color: #2f2525;
			}

			.check-item {
				font-weight: bold;
				font-size: 32rpx;
				color: #2f2525;
			}
		}

		.right-option {
			// flex: none;
			display: flex;
			align-items: center;
			margin-right: 24rpx;

			.icon {
				width: 24rpx;
				height: 24rpx;
			}

			.txt {
				color: #999999;
				padding-left: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.tab-lst-block {
		padding-bottom: 34rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;

		.item-option {
			margin-top: 24rpx;
			display: flex;
			align-items: center;

			.icon-item-option {
				width: 34rpx;
				height: 34rpx;
			}

			.txt {
				font-size: 24rpx;
				margin-left: 24rpx;
			}
		}
	}
</style>